<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.2.0">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">


<link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/pace-js@1/themes/blue/pace-theme-minimal.css">
  <script src="//cdn.jsdelivr.net/npm/pace-js@1/pace.min.js"></script>

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"yimig.github.io","root":"/","scheme":"Muse","version":"7.8.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":true},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
  </script>

  <meta name="description" content="你捡起了道具：遗失的纸片3# 一张普通的纸片，隐隐约约能够看到目录：“this、构造方法、原型、toString()、垃圾回收、数组、函数对象的方法、Date对象、Math对象、包装类、String()的方法（字符串操作）、正则表达式”。边角还有被撕扯的痕迹，它们应该属于一个笔记本，但不知为什么被主人撕下来丢掉了。 提示：集齐所有纸片应该可以得到一本技能书。 👇点击下方按钮调查">
<meta property="og:type" content="article">
<meta property="og:title" content="【JS】js学习小笔记 3#">
<meta property="og:url" content="http://yimig.github.io/2019/04/27/js_note3/index.html">
<meta property="og:site_name" content="Tim&#39;s Blog">
<meta property="og:description" content="你捡起了道具：遗失的纸片3# 一张普通的纸片，隐隐约约能够看到目录：“this、构造方法、原型、toString()、垃圾回收、数组、函数对象的方法、Date对象、Math对象、包装类、String()的方法（字符串操作）、正则表达式”。边角还有被撕扯的痕迹，它们应该属于一个笔记本，但不知为什么被主人撕下来丢掉了。 提示：集齐所有纸片应该可以得到一本技能书。 👇点击下方按钮调查">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2019-04-27T09:33:37.000Z">
<meta property="article:modified_time" content="2021-01-15T02:49:17.175Z">
<meta property="article:author" content="Tim">
<meta property="article:tag" content="javascript">
<meta property="article:tag" content="js学习笔记">
<meta name="twitter:card" content="summary">

<link rel="canonical" href="http://yimig.github.io/2019/04/27/js_note3/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-CN'
  };
</script>

  <title>【JS】js学习小笔记 3# | Tim's Blog</title>
  


  <script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?64126ab668fa908027cba9464a0afec7";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>




  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

<!-- hexo injector head_end start -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hexo-math@4.0.0/dist/style.css">
<!-- hexo injector head_end end --></head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">Tim's Blog</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
      <p class="site-subtitle" itemprop="description">Learn Everything!</p>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>




<nav class="site-nav">
  <ul id="menu" class="menu">
        <li class="menu-item menu-item-home">

    <a href="/" rel="section"><i class="fa fa-fw fa-home"></i>首页</a>

  </li>
        <li class="menu-item menu-item-about">

    <a href="/about/" rel="section"><i class="fa fa-fw fa-user"></i>关于</a>

  </li>
        <li class="menu-item menu-item-tags">

    <a href="/tags/" rel="section"><i class="fa fa-fw fa-tags"></i>标签</a>

  </li>
        <li class="menu-item menu-item-categories">

    <a href="/categories/" rel="section"><i class="fa fa-fw fa-th"></i>分类</a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/archives/" rel="section"><i class="fa fa-fw fa-archive"></i>归档</a>

  </li>
        <li class="menu-item menu-item-schedule">

    <a href="/schedule/" rel="section"><i class="fa fa-fw fa-calendar"></i>日程表</a>

  </li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div id="search-result">
  <div id="no-result">
    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
  </div>
</div>

    </div>
  </div>

</div>
    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>

  <a href="https://github.com/yimig" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content post posts-expand">
            

    
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://yimig.github.io/2019/04/27/js_note3/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/uploads/avatar.png">
      <meta itemprop="name" content="Tim">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Tim's Blog">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          【JS】js学习小笔记 3#
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2019-04-27 17:33:37" itemprop="dateCreated datePublished" datetime="2019-04-27T17:33:37+08:00">2019-04-27</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="fa fa-calendar-check-o"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2021-01-15 10:49:17" itemprop="dateModified" datetime="2021-01-15T10:49:17+08:00">2021-01-15</time>
              </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/Coding/" itemprop="url" rel="index"><span itemprop="name">Coding</span></a>
                </span>
                  ，
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/Coding/Web/" itemprop="url" rel="index"><span itemprop="name">Web</span></a>
                </span>
                  ，
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/Coding/Web/JavaScript/" itemprop="url" rel="index"><span itemprop="name">JavaScript</span></a>
                </span>
                  ，
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/Coding/Web/JavaScript/Common/" itemprop="url" rel="index"><span itemprop="name">Common</span></a>
                </span>
            </span>

          
            <span class="post-meta-item" title="本文字数">
              <span class="post-meta-item-icon">
                <i class="fa fa-file-word-o"></i>
              </span>
              <span>5.7k</span>
            </span>
            <span class="post-meta-item" title="阅读时长">
              <span class="post-meta-item-icon">
                <i class="fa fa-clock-o"></i>
              </span>
              <span>5 分钟</span>
            </span>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <p>你捡起了道具：<strong>遗失的纸片3#</strong> 一张普通的纸片，隐隐约约能够看到目录：“<strong>this、构造方法、原型、toString()、垃圾回收、数组、函数对象的方法、Date对象、Math对象、包装类、String()的方法（字符串操作）、正则表达式</strong>”。边角还有被撕扯的痕迹，它们应该属于一个笔记本，但不知为什么被主人撕下来丢掉了。 提示：集齐所有纸片应该可以得到一本技能书。 👇点击下方按钮调查<br><a id="more"></a></p>
<h2 id="13-this"><a href="#13-this" class="headerlink" title="13.this"></a>13.this</h2><blockquote>
<p>解析器在调用函数时每次都会向函数内部传递一个隐含的参数，就是_this_。<code>this</code>指向的是一个对象，是函数执行的<strong>上下文对象</strong>，根据<strong>调用方式不同</strong>，<code>this</code>的值不同。 1. 以函数形式调用时，<code>this</code>指代<strong>window</strong> 1. 以方法形式调用时，<code>this</code>指代<strong>包含该方法的对象</strong></p>
</blockquote>
<p>作用： 做到“函数的多态”</p>
<h2 id="14-构造方法"><a href="#14-构造方法" class="headerlink" title="14.构造方法"></a>14.构造方法</h2><h3 id="①使用工厂方法创建对象"><a href="#①使用工厂方法创建对象" class="headerlink" title="①使用工厂方法创建对象"></a>①使用工厂方法创建对象</h3><p>这样创建的都是<strong>object</strong>类型对象</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//函数体</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">createPerson</span>(<span class="params">name,age,gender</span>)</span></span><br><span class="line"><span class="function"></span>&#123;</span><br><span class="line">    <span class="keyword">var</span> obj=<span class="keyword">new</span> <span class="built_in">Object</span>();</span><br><span class="line">    obj.name=name;</span><br><span class="line">    obj.age=age;</span><br><span class="line">    obj.gender=gender;</span><br><span class="line">    obj.sayName=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        alert(<span class="built_in">this</span>.name);</span><br><span class="line">    &#125;;</span><br><span class="line">    <span class="keyword">return</span> obj;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//调用</span></span><br><span class="line"><span class="keyword">var</span> obj=createPerson(<span class="string">&quot;张三&quot;</span>,<span class="number">28</span>,<span class="string">&quot;男&quot;</span>);</span><br></pre></td></tr></table></figure>
<h3 id="②构造函数"><a href="#②构造函数" class="headerlink" title="②构造函数"></a>②构造函数</h3><ol>
<li>创建时，构造函数就是一个普通的函数，不同的是构造函数<strong>习惯上首字母大写</strong></li>
<li>调用时，普通函数直接调用，构造函数<strong>使用<code>new</code>调用</strong></li>
</ol>
<h4 id="构造函数的执行流程："><a href="#构造函数的执行流程：" class="headerlink" title="构造函数的执行流程："></a>构造函数的执行流程：</h4><ol>
<li>立刻创建一个新的对象</li>
<li>将新建的对象设置为函数中<code>this</code>，在构造函数中可使用<code>this</code>来引用新建的对象</li>
<li>逐行执行函数中的代码</li>
<li>将新建的对象作为返回值返回</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//函数体</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params">name,age,gender</span>)</span></span><br><span class="line"><span class="function"></span>&#123;</span><br><span class="line">    <span class="built_in">this</span>.name=name;</span><br><span class="line">    <span class="built_in">this</span>.age=age;</span><br><span class="line">    <span class="built_in">this</span>.gender=gender;</span><br><span class="line">    <span class="comment">/*this.sayName=function()&#123;</span></span><br><span class="line"><span class="comment">        alert(this.name);</span></span><br><span class="line"><span class="comment">    &#125;;*/</span></span><br><span class="line">    <span class="built_in">this</span>.sayName=sayNameFunc;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sayNameFunc</span>(<span class="params"></span>)</span></span><br><span class="line"><span class="function"></span>&#123;</span><br><span class="line">    alert(<span class="built_in">this</span>.name);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//调用</span></span><br><span class="line"><span class="keyword">var</span> person1=<span class="keyword">new</span> Person(<span class="string">&quot;张三&quot;</span>,<span class="number">28</span>,<span class="string">&quot;男&quot;</span>);</span><br></pre></td></tr></table></figure>
<p><strong>由于构造方法会多次创建对象，所以如果在构造方法中写入方法体势必占用大量内存空间，建议将function()提取到全局，创建对象时引用之（如上例）。</strong> <strong>但这样又会污染全局作用域的类命名空间，也很不安全，最佳解决方法是将方法存储在原型中，见下一章</strong></p>
<h3 id="④instanceof"><a href="#④instanceof" class="headerlink" title="④instanceof()"></a>④instanceof()</h3><blockquote>
<p>检查一个对象是否是一个类实例</p>
</blockquote>
<p>语法：<strong>对象 instanceof 构造函数</strong> 是，返回true，否，返回false <strong>所有对象都继承自object，所以任何对象与object做instanceof运算时都会返回true</strong></p>
<h2 id="15-原型"><a href="#15-原型" class="headerlink" title="15.原型"></a>15.原型</h2><h3 id="①prototype和proto属性"><a href="#①prototype和proto属性" class="headerlink" title="①prototype和proto属性"></a>①prototype和<strong>proto</strong>属性</h3><ol>
<li>我们所创建的每一个函数，解析器都会想函数中添加一个属性<code>prototype</code>。</li>
<li>这个属性对应着一个对象，该对象及<strong>原型</strong>。</li>
<li>普通函数也有<code>prototype</code>，但无任何作用。</li>
<li>当函数以构造函数形式调用时，它创建的对象中都会有一个隐含的属性<strong>指向该构造函数的原型对象</strong>，我们可以通过<code>__proto__</code>来访问这个属性。</li>
<li>原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象，我们可将对象中<strong>共有</strong>的内容同一设置到原型对象中。</li>
<li>当我们访问对象的一个属性或方法时，它会先在对象自身中查找，如果有则直接使用，如果没有则回去原型对象中查找，找到则直接使用。</li>
<li>以后我们创建构造函数时，可将这些对象共有的属性和方法<strong>统一添加到构造函数的原型对象</strong>中，这样不用分别为每一个对象添加，也不会影响到全局作用域，就可以使每个对象都使用这些属性和方法了。</li>
<li>原型对象中也有原型，<strong>直到object的原型才没有原型</strong></li>
</ol>
<h3 id="②原型对其他方法的影响"><a href="#②原型对其他方法的影响" class="headerlink" title="②原型对其他方法的影响"></a>②原型对其他方法的影响</h3><ol>
<li>使用<code>in</code>检查对象中是否含有某属性时，<strong>若对象中没有但原型中有，则同样返回true</strong></li>
<li>可以用对象的<code>hasOwnProperty()</code>来检查对象自身是否含有某属性</li>
</ol>
<h2 id="16-toString"><a href="#16-toString" class="headerlink" title="16. toString()"></a>16. toString()</h2><blockquote>
<p><strong>在object的原型中</strong>，打印对象默认调用toString()方法，可通过在对象中添加toString()方法来修改toString()函数。</p>
</blockquote>
<h2 id="17-垃圾回收"><a href="#17-垃圾回收" class="headerlink" title="17.垃圾回收"></a>17.垃圾回收</h2><ol>
<li>当一个对象没有任何变量或属性时对它进行引用，此时我们将永远无法操作该对象，此时该对象即为垃圾，占用内存并导致程序变慢。</li>
<li>JS拥有自动垃圾回收机制</li>
<li>将不再使用的对象<strong>置null</strong>即可触发垃圾回收</li>
</ol>
<h2 id="18-数组"><a href="#18-数组" class="headerlink" title="18.数组"></a>18.数组</h2><h3 id="①创建"><a href="#①创建" class="headerlink" title="①创建"></a>①创建</h3><h4 id="⑴方法一-常规创建"><a href="#⑴方法一-常规创建" class="headerlink" title="⑴方法一:常规创建"></a>⑴方法一:常规创建</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//创建数组</span></span><br><span class="line"><span class="keyword">var</span> arr=<span class="keyword">new</span> <span class="built_in">Array</span>();</span><br><span class="line"><span class="comment">//添加元素</span></span><br><span class="line">arr[<span class="number">0</span>]=<span class="number">10</span>;</span><br><span class="line">arr[<span class="number">1</span>]=<span class="number">33</span>;</span><br></pre></td></tr></table></figure>
<h4 id="⑷方法四：使用数组的构造函数创建"><a href="#⑷方法四：使用数组的构造函数创建" class="headerlink" title="⑷方法四：使用数组的构造函数创建"></a>⑷方法四：使用数组的构造函数创建</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr=<span class="keyword">new</span> <span class="built_in">Array</span>(<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">6</span>,<span class="number">10</span>);</span><br></pre></td></tr></table></figure>
<h4 id="⑶方法三：使用数组的字面量创建"><a href="#⑶方法三：使用数组的字面量创建" class="headerlink" title="⑶方法三：使用数组的字面量创建"></a>⑶方法三：使用数组的字面量创建</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr1=[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">6</span>,<span class="number">10</span>];<span class="comment">//数字数组</span></span><br><span class="line"><span class="keyword">var</span> arr2=[<span class="string">&quot;hello&quot;</span>,<span class="number">1</span>,<span class="literal">true</span>,<span class="literal">undefined</span>];<span class="comment">//混合数组</span></span><br><span class="line"><span class="keyword">var</span> arr3=[&#123;<span class="attr">name</span>:<span class="string">&quot;张三&quot;</span>,<span class="attr">age</span>:<span class="number">28</span>&#125;,&#123;<span class="attr">name</span>:<span class="string">&quot;李四&quot;</span>,<span class="attr">age</span>:<span class="number">25</span>&#125;];<span class="comment">//对象数组</span></span><br><span class="line"><span class="keyword">var</span> arr4=[<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;alert(<span class="number">1</span>);&#125;,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;alert(<span class="number">2</span>);&#125;];<span class="comment">//函数数组</span></span><br><span class="line"><span class="keyword">var</span> arr5=[[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>],[<span class="number">4</span>,<span class="number">5</span>,<span class="number">6</span>],[<span class="number">7</span>,<span class="number">8</span>,<span class="number">9</span>]];<span class="comment">//多维数组</span></span><br></pre></td></tr></table></figure>
<h3 id="②性质"><a href="#②性质" class="headerlink" title="②性质"></a>②性质</h3><ol>
<li>若读取不存在的元素，<strong>不会报错，返回undefined</strong></li>
<li>获取数组长度：<code>arr.Length</code>，该属性也可设置数组长度</li>
<li>对于非连续的元素，使用length可获取到数组的最大索引+1</li>
<li>设置<code>arr[arr.length]</code>永远向数组最后添加元素</li>
</ol>
<h3 id="③常用方法"><a href="#③常用方法" class="headerlink" title="③常用方法"></a>③常用方法</h3><ol>
<li><code>push()</code><strong>在末尾添加元素</strong>，也可添加多个元素，将返回添加后的新长度</li>
<li><code>pop()</code><strong>删除数组最后一个元素</strong>，并返回被删除的元素</li>
<li><code>unshift()</code><strong>在开头添加一个或多个元素</strong>。将返回添加后的新长度</li>
<li><code>shift()</code><strong>删除并返回数组的第一个元素</strong></li>
</ol>
<h3 id="④数组的遍历"><a href="#④数组的遍历" class="headerlink" title="④数组的遍历"></a>④数组的遍历</h3><p>——<strong>forEach方法（仅支持IE8以上的浏览器，还是建议使用for）</strong> foreach方法需以函数作为参数</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">arr.forEach(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&quot;hello&quot;</span>);</span><br><span class="line">&#125;)<span class="comment">//arr有几个元素就输出几个hello</span></span><br></pre></td></tr></table></figure>
<ol>
<li>像这种函数，由我们创建但不有我们调用的，我们称为<strong>回调函数</strong>（浏览器负责调用）</li>
<li>数组有几个元素就会调用几次，每次执行时，浏览器会将遍历到的元素以实参的形式传毒进来，我们可以定义形参来读取这些参数。</li>
<li>浏览器会在回调函数中传递三个参数：</li>
</ol>
<div class="table-container">
<table>
<thead>
<tr>
<th>参数</th>
<th>作用</th>
</tr>
</thead>
<tbody>
<tr>
<td>第一个参数</td>
<td><strong>当前正在遍历的元素</strong></td>
</tr>
<tr>
<td>第二个参数</td>
<td><strong>当前正在遍历的元素索引</strong></td>
</tr>
<tr>
<td>第三个参数</td>
<td><strong>正在遍历的数组</strong></td>
</tr>
</tbody>
</table>
</div>
<h3 id="⑤slice-splice"><a href="#⑤slice-splice" class="headerlink" title="⑤slice()/splice()"></a>⑤slice()/splice()</h3><h4 id="⑴slice-可以用来从数组中提取指定元素"><a href="#⑴slice-可以用来从数组中提取指定元素" class="headerlink" title="⑴slice()可以用来从数组中提取指定元素"></a>⑴slice()可以用来从数组中提取指定元素</h4><p>参数： 1. 第一个参数——截取开始位置的索引 1. 第二个参数——截取结束位置的索引（左闭右开） 第二个参数可省略，索引可传递一个负值：倒数值 返回： 截取到的数组</p>
<h4 id="⑵splice-可以用于删除数组的指定元素"><a href="#⑵splice-可以用于删除数组的指定元素" class="headerlink" title="⑵splice()可以用于删除数组的指定元素"></a>⑵splice()可以用于删除数组的指定元素</h4><p><strong>使用splice()会影响到原数组，并将被删除的元素返回</strong> 参数： 1. 第一个参数——开始位置的碎银 1. 第二个参数——<strong>删除元素的数量</strong> 1. 第三个及以后的参数——可传递新元素，这些元素将自动添加到删除索引之后</p>
<h3 id="⑥剩余方法"><a href="#⑥剩余方法" class="headerlink" title="⑥剩余方法"></a>⑥剩余方法</h3><h4 id="⑴concat-可连接两个或更多数组，并将新数组返回"><a href="#⑴concat-可连接两个或更多数组，并将新数组返回" class="headerlink" title="⑴concat() 可连接两个或更多数组，并将新数组返回"></a>⑴concat() 可连接两个或更多数组，并将新数组返回</h4><p>不仅可传数组也可传元素</p>
<h4 id="⑵join-可将数组转为字符串，并返回该串"><a href="#⑵join-可将数组转为字符串，并返回该串" class="headerlink" title="⑵join() 可将数组转为字符串，并返回该串"></a>⑵join() 可将数组转为字符串，并返回该串</h4><p>在join()中，可指定一个字符连接各元素。不指定默认为“,”</p>
<h4 id="⑶reverse-颠倒数组中的元素"><a href="#⑶reverse-颠倒数组中的元素" class="headerlink" title="⑶reverse() 颠倒数组中的元素"></a>⑶reverse() 颠倒数组中的元素</h4><p>会直接修改原数组</p>
<h4 id="⑷sort-可用来对数组中的元素排序"><a href="#⑷sort-可用来对数组中的元素排序" class="headerlink" title="⑷sort() 可用来对数组中的元素排序"></a>⑷sort() 可用来对数组中的元素排序</h4><ol>
<li>也会影响原数组</li>
<li>默认按Unicode编码排序</li>
<li>自定义排序函数→在Sort()中传入回调函数，回调函数需定义形参</li>
<li>浏览器会分别使用数组的元素作为实参调用回调函数。使用哪个元素不确定，但肯定的是在数组中第一个元素一定在第二个元素的前面。浏览器会根据回调函数的返回值来决定元素的顺序</li>
<li>返回值：</li>
</ol>
<div class="table-container">
<table>
<thead>
<tr>
<th>返回</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>>0</td>
<td>交换两个元素的位置</td>
</tr>
<tr>
<td>\\&lt;0</td>
<td>不交换</td>
</tr>
<tr>
<td>\=0</td>
<td>认为二值相等，也不交换</td>
</tr>
</tbody>
</table>
</div>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//依据数字大小进行排序（升序）</span></span><br><span class="line">arr.sort(<span class="function"><span class="keyword">function</span>(<span class="params">a,b</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> a-b;</span><br><span class="line">&#125;);</span><br><span class="line"><span class="comment">//降序</span></span><br><span class="line">arr.sort(<span class="function"><span class="keyword">function</span>(<span class="params">a,b</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> b-a;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<h2 id="19-函数对象的方法"><a href="#19-函数对象的方法" class="headerlink" title="19.函数对象的方法"></a>19.函数对象的方法</h2><h3 id="①call-apply"><a href="#①call-apply" class="headerlink" title="①call()/apply()"></a>①call()/apply()</h3><ol>
<li>都能执行函数</li>
<li>与普通调用不同的是，调用<code>call()</code>和<code>apply()</code>可将一个对象指定为第一个参数，此时这个对象将会成为函数执行时的<strong>this</strong></li>
<li><code>call()</code>方法可将要传入的实参在对象后依次传递,如 <code>fun.call(obj,1,2)</code>,这里的1和2是传递到函数fun的实参，相当于<code>fun(1,2)</code></li>
<li><code>apply()</code>方法需要将实参封装到一个数组中统一传递，如<code>fun.apply(obj,[1,2])</code></li>
</ol>
<h2 id="20-arugments对象"><a href="#20-arugments对象" class="headerlink" title="20.arugments对象"></a>20.arugments对象</h2><p>在调用函数时，浏览器每次都会传递两个隐含参数： 1. 函数上下文对象this 1. <strong>封装实参的对象arguments</strong></p>
<h3 id="概念"><a href="#概念" class="headerlink" title="概念"></a>概念</h3><ol>
<li>arguments是一个<strong>类数组对象</strong>。它可以通过索引操作数据，也可获取长度</li>
<li>在调用函数时，我们所传递的实参都会在arguments中保存</li>
<li><code>arguments.Length</code>可用来获取实参的长度</li>
<li><strong>即使不定义形参也可通过arguments得到实参</strong></li>
<li>arguments中有一个属性<strong>callee</strong>，此属性对应一个函数对象，即当前函数对象</li>
</ol>
<h2 id="21-Date对象"><a href="#21-Date对象" class="headerlink" title="21.Date对象"></a>21.Date对象</h2><h3 id="①如果直接使用构造函数创建一个Date对象，则会封装为当前代码执行的时间"><a href="#①如果直接使用构造函数创建一个Date对象，则会封装为当前代码执行的时间" class="headerlink" title="①如果直接使用构造函数创建一个Date对象，则会封装为当前代码执行的时间"></a>①如果直接使用构造函数创建一个Date对象，则会封装为<strong>当前代码执行的时间</strong></h3><h3 id="②创建指定时间对象："><a href="#②创建指定时间对象：" class="headerlink" title="②创建指定时间对象："></a>②创建指定时间对象：</h3><p>写在构造函数中，<strong>格式为：“mm/dd/yyyy hh/mm/ss”和“mm/dd/yyyy”</strong></p>
<h3 id="③得到日期"><a href="#③得到日期" class="headerlink" title="③得到日期"></a>③得到日期</h3><p>方法： 1. getDate():获得“日” 1. getDay():获得“周几”<strong>（返回0-6,0为周日）</strong> 1. getMonth():月 （返回0-11，0→1月，11→12月） 1. <strong>getFullYear()</strong>:年 1. getTime()：获得当前对象的<strong>时间戳</strong>（1970/1/1 00:00:00到目前时间的<strong>毫秒值</strong>）计算机底层使用的都是时间戳（获得当的时间戳Date.now())</p>
<h2 id="22-Math对象"><a href="#22-Math对象" class="headerlink" title="22.Math对象"></a>22.Math对象</h2><h3 id="概念-1"><a href="#概念-1" class="headerlink" title="概念"></a>概念</h3><ol>
<li>Math不是构造函数，不能创建对象，是一个工具类</li>
<li>有常用属性（Π、e等常数）</li>
</ol>
<h3 id="常用方法："><a href="#常用方法：" class="headerlink" title="常用方法："></a>常用方法：</h3><div class="table-container">
<table>
<thead>
<tr>
<th>方法</th>
<th>含义</th>
</tr>
</thead>
<tbody>
<tr>
<td>abs()</td>
<td>绝对值</td>
</tr>
<tr>
<td>ceil()</td>
<td>上舍入（向上取整）</td>
</tr>
<tr>
<td>floor()</td>
<td>下舍入（向下取整）</td>
</tr>
<tr>
<td>round()</td>
<td>四舍五入取整</td>
</tr>
<tr>
<td>random()</td>
<td>生成一个0-1之间的随机数</td>
</tr>
<tr>
<td>Math.round(Math.random()*x)</td>
<td>生成一个0-x之间的随机数</td>
</tr>
<tr>
<td>Math.round(Math.random()*(y-x)+x)</td>
<td>生成一个x-y之间的随机数</td>
</tr>
<tr>
<td>max()</td>
<td>获取多个数中的最大值</td>
</tr>
<tr>
<td>min()</td>
<td>获取多个数中的最小值</td>
</tr>
<tr>
<td>pow(x,y)</td>
<td>返回x的y次幂</td>
</tr>
<tr>
<td>sqrt(x)</td>
<td>对x开方</td>
</tr>
</tbody>
</table>
</div>
<h2 id="23-包装类"><a href="#23-包装类" class="headerlink" title="23.包装类"></a>23.包装类</h2><p>在JS中提供了三个包装类，通过这三个包装类可<strong>将基本数据类型数据转换为对象</strong> 即:<code>String()</code>/<code>Number()</code>/<code>Boolean()</code></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> num=<span class="keyword">new</span> <span class="built_in">Number</span>(<span class="number">3</span>);</span><br></pre></td></tr></table></figure>
<p><strong>对象的优点：可存储属性、方法</strong> <strong>缺点：无法直接进行比较、运算</strong> 方法和属性只能添加给对象，不能添加给基本数据类型，<strong>所以当我们对比一些基本数据类型的值去调用属性和方法时，浏览器会临时使用包装类将其转换为对象，然后调用对象的属性和方法，调用完后再将其转换为基本数据类型</strong>。</p>
<h2 id="24-String-的方法（字符串操作）"><a href="#24-String-的方法（字符串操作）" class="headerlink" title="24.String()的方法（字符串操作）"></a>24.String()的方法（字符串操作）</h2><ol>
<li>在底层字符串以数组保存，所以很多方法共用</li>
<li>以下方法均不影响原字符串</li>
</ol>
<div class="table-container">
<table>
<thead>
<tr>
<th>方法/属性</th>
<th>功能</th>
<th>附加</th>
</tr>
</thead>
<tbody>
<tr>
<td>length</td>
<td>字符串的长度</td>
<td></td>
</tr>
<tr>
<td>String.fromCharCode(…)</td>
<td>根据Unicode获取字符</td>
<td></td>
</tr>
<tr>
<td>concat()</td>
<td>连接多个字符串</td>
<td>作用与“+”相似</td>
</tr>
<tr>
<td>indexof()</td>
<td>检索一个字符串中是否含有指定内容</td>
<td>如果含有该内容，自返回第一次出现的索引，如果没有则返回-1。还可指定第二个参数，指定查找开始的索引位置。</td>
</tr>
<tr>
<td>lastindexof()</td>
<td>用法与indexof()相同，但从后往前找</td>
<td></td>
</tr>
<tr>
<td>slice()</td>
<td>截取指定内容</td>
<td>第一个参数为开始位置索引，第二个参数为结束为止索引（左闭右开）</td>
</tr>
<tr>
<td>substring()</td>
<td>与slice()类似，不同的是substring()不接受负值，负值默认为零，且能自动调整参数的位置</td>
<td>str.substring(2,1)→str.substring(1,2)</td>
</tr>
<tr>
<td>split()</td>
<td>可将一个字符串拆成数组</td>
<td>需要一个字符串作为参数，将据此拆分字符串</td>
</tr>
<tr>
<td>toLowerCase()</td>
<td>将字符串转为大写并返回</td>
<td></td>
</tr>
<tr>
<td>toUpperCase()</td>
<td>将字符串转为小写并返回</td>
<td></td>
</tr>
</tbody>
</table>
</div>
<h2 id="25-正则表达式"><a href="#25-正则表达式" class="headerlink" title="25.正则表达式"></a>25.正则表达式</h2><blockquote>
<p>正则表达式语法参见→<a target="_blank" rel="noopener" href="http://upane.cn/archives/1251">【Regex】正则表达式语法</a></p>
</blockquote>
<h3 id="①创建正则表达式对象"><a href="#①创建正则表达式对象" class="headerlink" title="①创建正则表达式对象"></a>①创建正则表达式对象</h3><h4 id="⑴常规创建"><a href="#⑴常规创建" class="headerlink" title="⑴常规创建"></a>⑴常规创建</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> reg=<span class="keyword">new</span> <span class="built_in">RegExp</span>(x,y)<span class="comment">//x：正则表达式，y：匹配模式(可忽略，也可设置多个)</span></span><br></pre></td></tr></table></figure>
<h4 id="⑵使用字面量创建"><a href="#⑵使用字面量创建" class="headerlink" title="⑵使用字面量创建"></a>⑵使用字面量创建</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> reg=<span class="regexp">/x/y</span></span><br><span class="line"><span class="comment">//x：正则表达式，y：匹配模式(可忽略，也可设置多个)</span></span><br></pre></td></tr></table></figure>
<h4 id="⑶匹配模式"><a href="#⑶匹配模式" class="headerlink" title="⑶匹配模式"></a>⑶匹配模式</h4><ol>
<li>i→忽略大小写</li>
<li>g→全局匹配</li>
</ol>
<h3 id="②检查"><a href="#②检查" class="headerlink" title="②检查"></a>②检查</h3><p><strong>——test()方法</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> result=reg.test(str);</span><br><span class="line"><span class="comment">//str为要检测的字符串</span></span><br></pre></td></tr></table></figure>
<h3 id="③与正则表达式相关的字符串语法"><a href="#③与正则表达式相关的字符串语法" class="headerlink" title="③与正则表达式相关的字符串语法"></a>③与正则表达式相关的字符串语法</h3><ol>
<li><strong>split()</strong> 将字符串拆成数组<strong>（可传递正则表达式）</strong></li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">str.split(reg);</span><br></pre></td></tr></table></figure>
<ol>
<li><strong>search()</strong> 搜索 若搜到，则返回第一次出现的索引，否则返回-1</li>
<li><strong>match()</strong> 可根据正则表达式将字符串中符合条件的内容提取出来</li>
<li><strong>replace()</strong> 替换 参数一：被替换的内容 参数二：替换内容</li>
</ol>

    </div>

    
    
    

      <footer class="post-footer">
          <div class="post-tags">
              <a href="/tags/javascript/" rel="tag"># javascript</a>
              <a href="/tags/js%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/" rel="tag"># js学习笔记</a>
          </div>

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/2019/04/27/regex_entry/" rel="prev" title="【Regex】正则表达式语法">
      <i class="fa fa-chevron-left"></i> 【Regex】正则表达式语法
    </a></div>
      <div class="post-nav-item">
    <a href="/2019/05/08/xpath_entry/" rel="next" title="【XPath】浅谈XPath">
      【XPath】浅谈XPath <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  



          </div>
          
    <div class="comments" id="gitalk-container"></div>

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#13-this"><span class="nav-number">1.</span> <span class="nav-text">13.this</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#14-%E6%9E%84%E9%80%A0%E6%96%B9%E6%B3%95"><span class="nav-number">2.</span> <span class="nav-text">14.构造方法</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E2%91%A0%E4%BD%BF%E7%94%A8%E5%B7%A5%E5%8E%82%E6%96%B9%E6%B3%95%E5%88%9B%E5%BB%BA%E5%AF%B9%E8%B1%A1"><span class="nav-number">2.1.</span> <span class="nav-text">①使用工厂方法创建对象</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E2%91%A1%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0"><span class="nav-number">2.2.</span> <span class="nav-text">②构造函数</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%E7%9A%84%E6%89%A7%E8%A1%8C%E6%B5%81%E7%A8%8B%EF%BC%9A"><span class="nav-number">2.2.1.</span> <span class="nav-text">构造函数的执行流程：</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E2%91%A3instanceof"><span class="nav-number">2.3.</span> <span class="nav-text">④instanceof()</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#15-%E5%8E%9F%E5%9E%8B"><span class="nav-number">3.</span> <span class="nav-text">15.原型</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E2%91%A0prototype%E5%92%8Cproto%E5%B1%9E%E6%80%A7"><span class="nav-number">3.1.</span> <span class="nav-text">①prototype和proto属性</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E2%91%A1%E5%8E%9F%E5%9E%8B%E5%AF%B9%E5%85%B6%E4%BB%96%E6%96%B9%E6%B3%95%E7%9A%84%E5%BD%B1%E5%93%8D"><span class="nav-number">3.2.</span> <span class="nav-text">②原型对其他方法的影响</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#16-toString"><span class="nav-number">4.</span> <span class="nav-text">16. toString()</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#17-%E5%9E%83%E5%9C%BE%E5%9B%9E%E6%94%B6"><span class="nav-number">5.</span> <span class="nav-text">17.垃圾回收</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#18-%E6%95%B0%E7%BB%84"><span class="nav-number">6.</span> <span class="nav-text">18.数组</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E2%91%A0%E5%88%9B%E5%BB%BA"><span class="nav-number">6.1.</span> <span class="nav-text">①创建</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E2%91%B4%E6%96%B9%E6%B3%95%E4%B8%80-%E5%B8%B8%E8%A7%84%E5%88%9B%E5%BB%BA"><span class="nav-number">6.1.1.</span> <span class="nav-text">⑴方法一:常规创建</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E2%91%B7%E6%96%B9%E6%B3%95%E5%9B%9B%EF%BC%9A%E4%BD%BF%E7%94%A8%E6%95%B0%E7%BB%84%E7%9A%84%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%E5%88%9B%E5%BB%BA"><span class="nav-number">6.1.2.</span> <span class="nav-text">⑷方法四：使用数组的构造函数创建</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E2%91%B6%E6%96%B9%E6%B3%95%E4%B8%89%EF%BC%9A%E4%BD%BF%E7%94%A8%E6%95%B0%E7%BB%84%E7%9A%84%E5%AD%97%E9%9D%A2%E9%87%8F%E5%88%9B%E5%BB%BA"><span class="nav-number">6.1.3.</span> <span class="nav-text">⑶方法三：使用数组的字面量创建</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E2%91%A1%E6%80%A7%E8%B4%A8"><span class="nav-number">6.2.</span> <span class="nav-text">②性质</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E2%91%A2%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95"><span class="nav-number">6.3.</span> <span class="nav-text">③常用方法</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E2%91%A3%E6%95%B0%E7%BB%84%E7%9A%84%E9%81%8D%E5%8E%86"><span class="nav-number">6.4.</span> <span class="nav-text">④数组的遍历</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E2%91%A4slice-splice"><span class="nav-number">6.5.</span> <span class="nav-text">⑤slice()&#x2F;splice()</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E2%91%B4slice-%E5%8F%AF%E4%BB%A5%E7%94%A8%E6%9D%A5%E4%BB%8E%E6%95%B0%E7%BB%84%E4%B8%AD%E6%8F%90%E5%8F%96%E6%8C%87%E5%AE%9A%E5%85%83%E7%B4%A0"><span class="nav-number">6.5.1.</span> <span class="nav-text">⑴slice()可以用来从数组中提取指定元素</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E2%91%B5splice-%E5%8F%AF%E4%BB%A5%E7%94%A8%E4%BA%8E%E5%88%A0%E9%99%A4%E6%95%B0%E7%BB%84%E7%9A%84%E6%8C%87%E5%AE%9A%E5%85%83%E7%B4%A0"><span class="nav-number">6.5.2.</span> <span class="nav-text">⑵splice()可以用于删除数组的指定元素</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E2%91%A5%E5%89%A9%E4%BD%99%E6%96%B9%E6%B3%95"><span class="nav-number">6.6.</span> <span class="nav-text">⑥剩余方法</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E2%91%B4concat-%E5%8F%AF%E8%BF%9E%E6%8E%A5%E4%B8%A4%E4%B8%AA%E6%88%96%E6%9B%B4%E5%A4%9A%E6%95%B0%E7%BB%84%EF%BC%8C%E5%B9%B6%E5%B0%86%E6%96%B0%E6%95%B0%E7%BB%84%E8%BF%94%E5%9B%9E"><span class="nav-number">6.6.1.</span> <span class="nav-text">⑴concat() 可连接两个或更多数组，并将新数组返回</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E2%91%B5join-%E5%8F%AF%E5%B0%86%E6%95%B0%E7%BB%84%E8%BD%AC%E4%B8%BA%E5%AD%97%E7%AC%A6%E4%B8%B2%EF%BC%8C%E5%B9%B6%E8%BF%94%E5%9B%9E%E8%AF%A5%E4%B8%B2"><span class="nav-number">6.6.2.</span> <span class="nav-text">⑵join() 可将数组转为字符串，并返回该串</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E2%91%B6reverse-%E9%A2%A0%E5%80%92%E6%95%B0%E7%BB%84%E4%B8%AD%E7%9A%84%E5%85%83%E7%B4%A0"><span class="nav-number">6.6.3.</span> <span class="nav-text">⑶reverse() 颠倒数组中的元素</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E2%91%B7sort-%E5%8F%AF%E7%94%A8%E6%9D%A5%E5%AF%B9%E6%95%B0%E7%BB%84%E4%B8%AD%E7%9A%84%E5%85%83%E7%B4%A0%E6%8E%92%E5%BA%8F"><span class="nav-number">6.6.4.</span> <span class="nav-text">⑷sort() 可用来对数组中的元素排序</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#19-%E5%87%BD%E6%95%B0%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%96%B9%E6%B3%95"><span class="nav-number">7.</span> <span class="nav-text">19.函数对象的方法</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E2%91%A0call-apply"><span class="nav-number">7.1.</span> <span class="nav-text">①call()&#x2F;apply()</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#20-arugments%E5%AF%B9%E8%B1%A1"><span class="nav-number">8.</span> <span class="nav-text">20.arugments对象</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%A6%82%E5%BF%B5"><span class="nav-number">8.1.</span> <span class="nav-text">概念</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#21-Date%E5%AF%B9%E8%B1%A1"><span class="nav-number">9.</span> <span class="nav-text">21.Date对象</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E2%91%A0%E5%A6%82%E6%9E%9C%E7%9B%B4%E6%8E%A5%E4%BD%BF%E7%94%A8%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AADate%E5%AF%B9%E8%B1%A1%EF%BC%8C%E5%88%99%E4%BC%9A%E5%B0%81%E8%A3%85%E4%B8%BA%E5%BD%93%E5%89%8D%E4%BB%A3%E7%A0%81%E6%89%A7%E8%A1%8C%E7%9A%84%E6%97%B6%E9%97%B4"><span class="nav-number">9.1.</span> <span class="nav-text">①如果直接使用构造函数创建一个Date对象，则会封装为当前代码执行的时间</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E2%91%A1%E5%88%9B%E5%BB%BA%E6%8C%87%E5%AE%9A%E6%97%B6%E9%97%B4%E5%AF%B9%E8%B1%A1%EF%BC%9A"><span class="nav-number">9.2.</span> <span class="nav-text">②创建指定时间对象：</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E2%91%A2%E5%BE%97%E5%88%B0%E6%97%A5%E6%9C%9F"><span class="nav-number">9.3.</span> <span class="nav-text">③得到日期</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#22-Math%E5%AF%B9%E8%B1%A1"><span class="nav-number">10.</span> <span class="nav-text">22.Math对象</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%A6%82%E5%BF%B5-1"><span class="nav-number">10.1.</span> <span class="nav-text">概念</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95%EF%BC%9A"><span class="nav-number">10.2.</span> <span class="nav-text">常用方法：</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#23-%E5%8C%85%E8%A3%85%E7%B1%BB"><span class="nav-number">11.</span> <span class="nav-text">23.包装类</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#24-String-%E7%9A%84%E6%96%B9%E6%B3%95%EF%BC%88%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%93%8D%E4%BD%9C%EF%BC%89"><span class="nav-number">12.</span> <span class="nav-text">24.String()的方法（字符串操作）</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#25-%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F"><span class="nav-number">13.</span> <span class="nav-text">25.正则表达式</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E2%91%A0%E5%88%9B%E5%BB%BA%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F%E5%AF%B9%E8%B1%A1"><span class="nav-number">13.1.</span> <span class="nav-text">①创建正则表达式对象</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E2%91%B4%E5%B8%B8%E8%A7%84%E5%88%9B%E5%BB%BA"><span class="nav-number">13.1.1.</span> <span class="nav-text">⑴常规创建</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E2%91%B5%E4%BD%BF%E7%94%A8%E5%AD%97%E9%9D%A2%E9%87%8F%E5%88%9B%E5%BB%BA"><span class="nav-number">13.1.2.</span> <span class="nav-text">⑵使用字面量创建</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E2%91%B6%E5%8C%B9%E9%85%8D%E6%A8%A1%E5%BC%8F"><span class="nav-number">13.1.3.</span> <span class="nav-text">⑶匹配模式</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E2%91%A1%E6%A3%80%E6%9F%A5"><span class="nav-number">13.2.</span> <span class="nav-text">②检查</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E2%91%A2%E4%B8%8E%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F%E7%9B%B8%E5%85%B3%E7%9A%84%E5%AD%97%E7%AC%A6%E4%B8%B2%E8%AF%AD%E6%B3%95"><span class="nav-number">13.3.</span> <span class="nav-text">③与正则表达式相关的字符串语法</span></a></li></ol></li></ol></div>
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="Tim"
      src="/uploads/avatar.png">
  <p class="site-author-name" itemprop="name">Tim</p>
  <div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives/">
        
          <span class="site-state-item-count">90</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/categories/">
          
        <span class="site-state-item-count">24</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
          
        <span class="site-state-item-count">40</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author motion-element">
      <span class="links-of-author-item">
        <a href="https://github.com/yimig" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;yimig" rel="noopener" target="_blank"><i class="fa fa-fw fa-github"></i>GitHub</a>
      </span>
      <span class="links-of-author-item">
        <a href="mailto:zhangyiming@programmer.net" title="E-Mail → mailto:zhangyiming@programmer.net" rel="noopener" target="_blank"><i class="fa fa-fw fa-envelope"></i>E-Mail</a>
      </span>
      <span class="links-of-author-item">
        <a href="https://leetcode.com/yimig/" title="LeeCode → https:&#x2F;&#x2F;leetcode.com&#x2F;yimig&#x2F;" rel="noopener" target="_blank"><i class="fa fa-fw fa-code"></i>LeeCode</a>
      </span>
      <span class="links-of-author-item">
        <a href="https://www.zhihu.com/people/tim-2-96" title="zhihu → https:&#x2F;&#x2F;www.zhihu.com&#x2F;people&#x2F;tim-2-96" rel="noopener" target="_blank"><i class="fa fa-fw fa-question-circle"></i>zhihu</a>
      </span>
  </div>


  <div class="links-of-blogroll motion-element">
    <div class="links-of-blogroll-title">
      <i class="fa fa-fw fa-link"></i>
      Links
    </div>
    <ul class="links-of-blogroll-list">
        <li class="links-of-blogroll-item">
          <a href="https://upane.cn/" title="https:&#x2F;&#x2F;upane.cn" rel="noopener" target="_blank">博客旧址</a>
        </li>
    </ul>
  </div>

      </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2021</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">Tim</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-area-chart"></i>
    </span>
    <span title="站点总字数">183k</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-coffee"></i>
    </span>
    <span title="站点阅读时长">2:46</span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io/" class="theme-link" rel="noopener" target="_blank">Hexo</a> & <a href="https://muse.theme-next.org/" class="theme-link" rel="noopener" target="_blank">NexT.Muse</a> 强力驱动
  </div>

        








      </div>
    </footer>
  </div>

  
  <script src="/lib/anime.min.js"></script>
  <script src="/lib/velocity/velocity.min.js"></script>
  <script src="/lib/velocity/velocity.ui.min.js"></script>

<script src="/js/utils.js"></script>

<script src="/js/motion.js"></script>


<script src="/js/schemes/muse.js"></script>


<script src="/js/next-boot.js"></script>


  <script defer src="//cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/three.min.js"></script>
    <script defer src="//cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/canvas_sphere.min.js"></script>


  
  <script>
    (function(){
      var bp = document.createElement('script');
      var curProtocol = window.location.protocol.split(':')[0];
      bp.src = (curProtocol === 'https') ? 'https://zz.bdstatic.com/linksubmit/push.js' : 'http://push.zhanzhang.baidu.com/push.js';
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(bp, s);
    })();
  </script>




  
<script src="/js/local-search.js"></script>













  

  

  

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">

<script>
NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
    var gitalk = new Gitalk({
      clientID    : 'a876807f33858291f9d9',
      clientSecret: '7a5c6a83611c309965d7339d7ca5f16e34a21e9f',
      repo        : 'yimig.github.io',
      owner       : 'yimig',
      admin       : ['yimig'],
      id          : '88e9f8221311979c1a05d881219d4c20',
        language: '',
      distractionFreeMode: true
    });
    gitalk.render('gitalk-container');
  }, window.Gitalk);
});
</script>

</body>
</html>
